<script lang="ts" setup>
import { ref } from "vue";

const dataList = ref<any[]>([
  {
    nickName: "微信昵称",
    level: "推荐",
    orderNo: "2025080500001",
    code: "121083638",
    content: "我对此次服务非常满意",
    visible: true,
    isAnonymous: "是",
    createdAt: "2021-01-01 00:00:00",
  },
  {
    nickName: "微信昵称",
    level: "超赞",
    orderNo: "2025080500001",
    code: "121083638",
    realName: "李少辉",
    phone: "1351234567",
    content: "我对此次服务非常满意",
    visible: true,
    isAnonymous: "否",
    createdAt: "2021-01-01 00:00:00",
  },
  {
    nickName: "微信昵称",
    level: "一般",
    orderNo: "2025080500001",
    code: "121083638",
    realName: "李少辉",
    phone: "1351234567",
    content: "我对此次服务非常满意",
    visible: false,
    isAnonymous: "否",
    createdAt: "2021-01-01 00:00:00",
  },
  {
    nickName: "微信昵称",
    level: "较差",
    orderNo: "2025080500001",
    code: "121083638",
    realName: "李少辉",
    phone: "1351234567",
    content: "我对此次服务非常满意",
    visible: true,
    isAnonymous: "否",
    createdAt: "2021-01-01 00:00:00",
  },
]);

const modalVisible = ref(false);
const formAction = ref("");

const handleAction = (action: string) => {
  if (action === "add") {
    modalVisible.value = true;
    formAction.value = "add";
  }
};
</script>

<template>
  <umrp-container :gap="16" padding="16px" bg-color="#f2f2f2" height="100%">
    <umrp-breadcrumb :items="['订单管理', '评价列表']"></umrp-breadcrumb>
    <umrp-search-card>
      <umrp-row :gutter="12">
        <umrp-col :span="8">
          <umrp-form-item label="商品编号">
            <umrp-input placeholder="请输入商品编号"></umrp-input>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="8">
          <umrp-form-item label="订单编号">
            <umrp-input placeholder="请输入订单编号"></umrp-input>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="8">
          <umrp-form-item label="微信昵称">
            <umrp-input placeholder="请输入用户的微信昵称"></umrp-input>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="8">
          <umrp-form-item label="用户编号">
            <umrp-input placeholder="请输入用户的账号ID"></umrp-input>
          </umrp-form-item>
        </umrp-col>
      </umrp-row>
    </umrp-search-card>
    <umrp-card :border="false">
      <umrp-table :data="dataList" @action="handleAction">
        <template #columns>
          <umrp-table-column title="序号" data-index="id" :width="50"></umrp-table-column>
          <umrp-table-column title="订单信息" slot-name="product" :width="300"></umrp-table-column>
          <umrp-table-column title="微信资料" slot-name="wxinfo" :width="200"></umrp-table-column>
          <umrp-table-column title="评价内容" data-index="content"></umrp-table-column>
          <umrp-table-column title="评价等级" data-index="level" :width="80"></umrp-table-column>
          <umrp-table-column title="是否匿名" data-index="isAnonymous" :width="80"></umrp-table-column>
          <umrp-table-column title="是否可见" slot-name="visible" :width="80"></umrp-table-column>
          <umrp-table-column title="是否置顶" slot-name="top" :width="80"></umrp-table-column>
          <umrp-table-column title="评价时间" data-index="createdAt" :width="160"></umrp-table-column>
          <umrp-table-column title="操作" slot-name="action" :width="100"></umrp-table-column>
        </template>
        <template #action>
          <umrp-space :size="10">
            <umrp-button type="primary">评价截图</umrp-button>
          </umrp-space>
        </template>
        <template #wxinfo="{ record }">
          <umrp-user-info :phone="false" :nick-name="record.nickName" :code="record.code"></umrp-user-info>
        </template>
        <template #visible>
          <umrp-switch></umrp-switch>
        </template>
        <template #top>
          <umrp-switch></umrp-switch>
        </template>
        <template #product>
          <umrp-media>
            <umrp-space direction="vertical" :size="6">
              <umrp-text bold>订单编号：2025080500001</umrp-text>
              <umrp-text>商品名称：小蓝卡商品</umrp-text>
              <umrp-text>商品编号：465</umrp-text>
              <umrp-text>￥99 x1</umrp-text>
            </umrp-space>
          </umrp-media>
        </template>
      </umrp-table>
    </umrp-card>
  </umrp-container>
</template>
